import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:pplive/common/api_service.dart';
import 'package:pplive/models/extensions/moment_extensions.dart';
import 'package:pplive/models/moment_model.dart';

import '../common/utils.dart';

class SquareCell extends StatefulWidget {
  final int index;
  final Moment model;
  final Function(Moment model)? clickBlock;

  SquareCell(
      {super.key, required this.index, required this.model, this.clickBlock});

  @override
  State<StatefulWidget> createState() => _SquareCell();
}

class _SquareCell extends State<SquareCell> {
  void reloadData() {
    Future.delayed(Duration(milliseconds: 100), () {
      setState(() {});
    });
  }

  void gotoSub() {
    widget.clickBlock?.call(widget.model);
  }

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    var numberOfAudience = 3;
    var sizeOfAudience = 20.0;
    var model = widget.model;

    return GestureDetector(
      onTap: gotoSub,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          // color: Colors.grey.withOpacity(0.8),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              model.userView(() => setState(() {})),
              SizedBox(
                height: 10,
              ),
              Text(
                model.content,
                style: theme.textTheme.labelMedium,
              ),
              SizedBox(
                height: 12,
              ),
              model.picWidget(),
              SizedBox(
                height: 12,
              ),
              Text(
                "${model.createTime.formatTimestamp()}",
                style: theme.textTheme.labelSmall,
              ),
              Row(
                children: [
                  model.replyUserInfos.isEmpty
                      ? SizedBox.shrink()
                      : Container(
                          height: sizeOfAudience,
                          width: sizeOfAudience * numberOfAudience +
                              (numberOfAudience - 1) * 4,
                          child: GridView.builder(
                              physics: NeverScrollableScrollPhysics(),
                              itemCount: model.replyUserInfos.length,
                              gridDelegate:
                                  SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 3,
                                      mainAxisSpacing: 4,
                                      crossAxisSpacing: 4),
                              itemBuilder: (c, index) => ClipRRect(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(10)),
                                  child: CachedNetworkImage(
                                    imageUrl: model.replyUserInfos[index].head,
                                    placeholder: (c, url) =>
                                        Icon(Icons.account_circle),
                                    errorWidget: (c, url, error) =>
                                        Icon(Icons.account_circle),
                                  ) //cached_network_image
                                  ))),
                  Expanded(
                      child: Row(
                    children: [
                      TextButton.icon(
                        label: Text(
                          "${model.replyCount}",
                          style: theme.textTheme.labelSmall,
                        ),
                        icon: Icon(Icons.chat_sharp),
                        style: TextButton.styleFrom(
                          foregroundColor: Color(0x66ffffff),
                        ),
                        onPressed: gotoSub,
                      ),
                      TextButton.icon(
                        label: Text(
                          "${model.likeCount}",
                          style: theme.textTheme.labelSmall?.copyWith(
                              color:
                                  model.like ? Colors.red : Color(0x66ffffff)),
                        ),
                        icon: Icon(Icons.add_circle_outline),
                        style: TextButton.styleFrom(
                          foregroundColor:
                              model.like ? Colors.red : Color(0x66ffffff),
                        ),
                        onPressed: () {
                          var like = !model.like;
                          ApiService.requestWithCallback<bool>(
                              true, "/square/moment/likeMoment",
                              params: {
                                "momentId": model.momentId,
                                "like": like
                              },
                              debuglog: true, callback: (data) {
                            print("object ===== ${data.message}");
                            if (data.code == ApiCodeSucc) {
                                model.like = like;
                                model.likeCount = like ? model.likeCount + 1 : model.likeCount - 1;
                              reloadData();
                            }
                          });
                        },
                      )
                    ],
                  )),
                  GestureDetector(
                    child: Icon(Icons.more_horiz, color: Color(0x66ffffff)),
                    onTap: () {},
                  ),
                  SizedBox(
                    height: 26,
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
